import React, { useState } from 'react'
import { NavBar, Button } from '@nutui/nutui-react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { ArrowLeft } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import { Input, Toast } from '@nutui/nutui-react'
import { Tips } from '@nutui/icons-react'
import axios from 'axios'
export default function Editphone() {
    let navigate = useNavigate()
    let [tel, setTel] = useState("")
    let [url, setUrl] = useSearchParams()
    let phone = url.get("phone")
    const [countdown, setCountdown] = useState(0);
    let [codes, setCodes] = useState("")
    let id = "66680edd99dcf23902953a43"
    let getCodes = async () => {
        if (tel) {
            setCountdown(60);
            const timer = setInterval(() => {
                setCountdown((prevCountdown) => prevCountdown - 1);
            }, 1000);

            setTimeout(() => {
                clearInterval(timer);
                setCountdown(0);
            }, 60000);
        }
        let res = await axios.post('http://123.57.180.216:3000/api/get_sms', { phone: tel })
        console.log(res);
        if (res.data.code === 0) {
            Toast.show({
                content: '发送成功',
                contentStyle: {
                    width: '120px',
                    height: '40px',
                    fontSize: "20px"
                }
            })
            sessionStorage.setItem("sms", res.data.sms)
        } else {
            Toast.show({
                content: '发送失败',
                contentStyle: {
                    width: '120px',
                    height: '40px',
                    fontSize: "20px"
                }
            })
        }
    }
    let next = async () => {
        if (codes === sessionStorage.getItem("sms")) {
            let obj = {
                _id: id,
                phone: tel
            }
            await axios.post("http://123.57.180.216:3000/editphone", obj)
            navigate("/information")
        }
    }

    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => window.history.back()}
            >
                更改手机号
            </NavBar>
            <h3 style={{ marginLeft: "20px" }}>您当前的手机号码为:{phone}</h3>
            <Input
                value={tel}
                onChange={(e) => setTel(e)}
                placeholder="请输入新手机号"
            />
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: '#fff',
                    padding: '0 10px',
                }}
            >
                <Tips color="var(--nutui-gray-7)" />
                <Input
                    value={codes} onChange={(e) => setCodes(e)}
                    placeholder="请输入短信验证码"
                    style={{ '--nutui-input-padding': '10px' }}
                />
                <div className="right">
                    <Button type="primary" size="small" onClick={getCodes}>
                        {countdown > 0 ? `${countdown}秒倒计时` : '获取验证码'}
                    </Button>
                </div>
            </div>
            <Button block type="primary" style={{ marginTop: "30px" }} onClick={()=>next(id)}>
                下一步
            </Button>
        </div>
    )
}
